<template>
    <div>
        <span class="title">预警详情</span>
        <p class="warning_title">{{warning_title}}</p>
        <p class="warning_time">{{warning_time}}</p>
        <div class="transformersubstation_info">
            <div class="div_liststyle">
                {{transformername}}
            </div>
            <div class="div_liststyle">
                {{devname}}
            </div>
            <div class="div_liststyle">
                {{devtype}}
            </div>
            <div class="div_liststyle">
                {{devgroup}}
            </div>
            <div class="div_liststyle">
                {{location}}
            </div>
            
            <div class="div_liststyle">
                <Button type="primary" @click="showimg">设备图片</Button>
            </div>
        </div>
        <div class="table_img_div">
            <!-- <div class="table_img_div_child" style="text-align:left;">
                <img :src="devimg" alt="" style="height:350px;">
            </div> -->
        </div>
        <div id="warningChart">

        </div>
        <Collapse v-model="resolve">
            <Panel name="1" style="font-size:17px;">
                处理流程
                <p slot="content">
                    <ul class="itemlist">
                        <li class="item item0">
                            <div style="text-align:center;padding:5px;">
                                <Button type="primary" :style="{background:Electric_warning_status==0?'#dd514c':'#3bb4f2','border-color':Electric_warning_status==0?'#dd514c':'#3bb4f2'}" @click="Electric_warning">{{Electric_warning_text}}</Button>
                            </div>
                            <div style="text-align:center;padding:5px;">
                                <Button type="primary" :style="{background:Temperature_warning_status==0?'#dd514c':'#3bb4f2','border-color':Temperature_warning_status==0?'#dd514c':'#3bb4f2'}" @click="Temperature_warning">{{Temperature_warning_text}}</Button>
                            </div>
                        </li>
                        <li class="item item2">
                            预警说明：{{devdetail}}
                        </li>
                        <li class="item item1">
                            <p style="width:100%;text-align:center;">是否结案</p>
                            <p style="width:100%;text-align:center;">
                                <RadioGroup v-model="result">
                                    <Radio label="待处理"></Radio>
                                    <Radio label="处理中"></Radio>
                                    <Radio label="已处理"></Radio>
                                </RadioGroup>
                            </p>
                            <p style="width:100%;text-align:center;margin-top:15px;">
                                <Button type="primary" @click="save_resolve_result">保存</Button>
                            </p>
                        </li>
                    </ul>
                </p>
            </Panel>
        </Collapse>
        <Modal title="图片查看" v-model="visible">
            <img :src="devimg" style="width: 100%">
        </Modal>
    </div>
</template>
<script>
import util from '../../util/util'
export default {
    data(){
        return {
            visible:false,
            devdetail:'',
            devimg:'',
            deviceinfo:{},
            Electric_warning_status:0,
            Temperature_warning_status:0,
            Electric_warning_text:"开启电量预警",
            Temperature_warning_text:'开启温度预警',
            result:'待处理',
            resolve:'1',
            warning_title:'',
            warning_time:'',
            transformername:'',
            devname:'',
            devtype:'',
            devgroup:'',
            location:'',
            person:'',
            concat:'',
            xAxis:[],
            legend:[],
            datamap:{}
        }
    },
    created(){
        if(!this.$store.state.deviceinfo){
            this.$router.go(-1);
            return false;
        }
        this.devimg = this.$store.state.img;
        this.deviceinfo = this.$store.state.deviceinfo;
        this.transformername = '变电站：'+this.deviceinfo.transformer_substation;
        this.devname = '设备名称：'+this.deviceinfo.devname;
        this.devtype = '设备类别：'+this.deviceinfo.devtype;
        this.devgroup = '所在编组：'+this.deviceinfo.devgroup;
        this.warning_time = this.deviceinfo.date.replace('T',' ');
        this.location = '位置：'+this.deviceinfo.location;
        this.warning_title = this.deviceinfo.warningtype;
        this.devdetail = this.deviceinfo.devdetail;
        this.Electric_warning_status = this.deviceinfo.device_battery_msg_flag;
        this.Temperature_warning_status = this.deviceinfo.device_warning_msg_flag;
        this.result = this.deviceinfo.status;
        if(this.Electric_warning_status==1){
            this.Electric_warning_text = '关闭电量预警';
        }
        if(this.Temperature_warning_status==1){
            this.Temperature_warning_text = '关闭温度预警';
        }
        this.getdevice_day_data(this.deviceinfo.device_index,this.warning_time.split(' ')[0]);
    },
    mounted(){
        this.$nextTick(()=>{
            //this.initChart('warningChart');
        })
    },
    methods:{
        showimg:function(){
            this.visible = true;
        },
        open_close_warning:function(id,temp_warning_status,battle_warning_status,flag,type){
            let vm = this;
            util.ajax({
                method: 'PATCH',
                url: '/api-device/'+id+'/',
                data:{
                    warning_msg_flag:temp_warning_status,
                    battery_msg_flag:battle_warning_status
                }
            })
            .then(function (response) {
                if(response.status==200){
                    //vm.GetDeviceList(1,10);
                    vm.Electric_warning_status = response.data.battery_msg_flag;
                    vm.temp_warning_status = response.data.warning_msg_flag;
                    if(vm.Electric_warning_status==1){
                        vm.Electric_warning_text = '关闭电量预警';
                    }else{
                        vm.Electric_warning_text = '开启电量预警';
                    }
                    if(vm.Temperature_warning_status==1){
                        vm.Temperature_warning_text = '关闭温度预警';
                    }else{
                        vm.Temperature_warning_text = '开启温度预警';
                    }
                    if(flag==='open'){
                        vm.$Message.success('开启成功');
                    }else if(flag==='close'){
                        vm.$Message.success('关闭成功');
                    }
                }else{
                    if(flag==='open'){
                        vm.$Message.error('开启失败');
                    }else if(flag==='close'){
                        vm.$Message.error('关闭失败');
                    }
                }
            })
            .catch(function(err){
                if(flag==='open'){
                    vm.$Message.error('开启失败');
                }else if(flag==='close'){
                    vm.$Message.error('关闭失败');
                }
            })
        },
        getdevice_day_data:function(device_index,date){
            let vm = this;
            util.ajax({
                method: 'get',
                url: '/api-record/device_date?device_index='+device_index+'&date='+date
            })
            .then(function (response) {
                if(response.status==200){
                   setTimeout(()=>{
                        vm.title = date+' '+vm.devname.split('：')[1]+' 温度详情';
                        vm.initChart('warningChart',response.data.x_series,response.data.y_series,response.data.env);
                   },100)
                }else{
                   
                }
            })
            .catch(function(err){
                
            })
        },
        initChart:function(id,xAxis,data,envdata){
            //let echarts = require('echarts');
            let echarts = require('echarts/lib/echarts');
            require('echarts/lib/chart/line');
            
            require("echarts/lib/component/grid");
            require("echarts/lib/component/title");
            require("echarts/lib/component/markPoint");

            // 引入提示框和标题组件
            require('echarts/lib/component/tooltip');
            require('echarts/lib/component/legend');
            require('echarts/lib/component/title');
            require("echarts/lib/component/dataZoom");
            let myChart = echarts.init(document.getElementById(id));
            let serieslist = [];
            let legendd = [];
            for(let i = 0;i<data.length;i++){
                let item = {
                    name:data[i].name,
                    type:'line',
                    data:data[i].data,
                    smooth:true
                }
                serieslist.push(item);
                legendd.push(data[i].name);
            }

            let envitem = {
                name:envdata.name,
                type:'line',
                data:envdata.data,
                smooth:true
            }
            serieslist.push(envitem);
            legendd.push(envitem.name);
            let option = {
                title: {
                    text: this.title,
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid:{
                    left:'5%',
                    right:'5%'
                },
                legend: {
                    data:legendd,
                    right:'center',
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxis
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100
                    },
                    {
                        type: 'inside',
                        realtime: true,
                        start: 0,
                        end: 100
                    }
                ],
                series: serieslist
            };
            myChart.setOption(option);
            window.addEventListener('resize',() => {
                myChart.resize();
            })
        },
        Electric_warning:function(){
            if(this.Electric_warning_status==1){
                this.Electric_warning_status = 0;
                this.Electric_warning_text = '开启电量预警';
                this.open_close_warning(this.deviceinfo.device_index,this.Temperature_warning_status,this.Electric_warning_status,'close','battle');
            }else if(this.Electric_warning_status==0){
                this.Electric_warning_status=1;
                this.Electric_warning_text = '关闭电量预警';
                this.open_close_warning(this.deviceinfo.device_index,this.Temperature_warning_status,this.Electric_warning_status,'open','battle');
            }
        },
        Temperature_warning:function(){
            if(this.Temperature_warning_status==1){
                this.Temperature_warning_status = 0;
                this.Temperature_warning_text = '开启电量预警';
                this.open_close_warning(this.deviceinfo.device_index,this.Temperature_warning_status,this.Electric_warning_status,'close','temperature');
            }else if(this.Temperature_warning_status==0){
                this.Temperature_warning_status = 1;
                this.Temperature_warning_text = '关闭电量预警';
                this.open_close_warning(this.deviceinfo.device_index,this.Temperature_warning_status,this.Electric_warning_status,'open','temperature');
            }
        },
        save_resolve_result:function(){
            let status = 0;
            switch(this.result)
            {
                case '待处理':
                    status = 0;
                    break;
                case '处理中':
                    status = 1;
                    break;
                case '已处理':
                    status = 2;
                    break;
                default:
                    break;
            }
            this.save_resolve_result_req(status,this.deviceinfo.id);
        },
        save_resolve_result_req:function(status,id){
            let vm = this;
            util.ajax({
                method: 'PATCH',
                url: '/api-warning/'+id+'/',
                data:{
                    processing_status:status
                }
            })
            .then(function (response) {
                if(response.status==200){
                    vm.$Message.success('保存成功');
                }else{
                   
                }
            })
            .catch(function(err){
                
            })
        }
    }
}
</script>
<style scoped>
    .title{
        color: #0e90d2;
        font-size: 20px;
        font-weight: 700;
    }
    .itemlist{
        list-style: none;
        display: flex;
    }
    .item2{
        width: 60%;
        color: #ff5400;
    }
    .item1{
        width: 20%;
    }
    .item0{
        width: 20%;
    }
    .warning_time{
        font-size: 16px;
        text-align: center;
        line-height: 35px;
    }
    .div_liststyle{
        padding: 10px;
        border-right: 1px solid #ddd;
        font-size: 16px;
        width: 20%;
        text-align: center;
    }
    .transformersubstation_info{
        width: 100%;
        height: auto;
        border:1px solid #ddd;
        display: flex;
        padding: 15px;
        margin-bottom: 30px;
    }
    .transformersubstation_info div:last-child{
        border-right: none;
    }
    .warning_title{
        font-size: 25px;
        color: #333;
        font-weight: bold;
        text-align: center;
    }
    .table_img_div{
        display: flex;
        justify-content: center;
    }
    .table_img_div_child{
        width: 50%;
    }
    #warningChart{
        width: 100%;
        height: 350px;
    }
</style>
